<template>
  <div
    class="flex justify-between w-screen h-12 bg-gray-600 flex-nowrap bg-nav"
  >
    <div
      style="width: 200px; line-height: 48px"
      class="px-3 font-bold text-white"
    >
      <span>ELE_ADMIN管理系统</span>
    </div>
    <div
      style="width: 30px; line-height: 48px"
      class="text-center text-white cursor-pointer"
    >
      <div @click="handleCollapse">
        <el-icon v-if="!store.state.app.isCollapse">
          <arrow-left-bold />
        </el-icon>
        <el-icon v-if="store.state.app.isCollapse">
          <arrow-right-bold />
        </el-icon>
      </div>
    </div>
    <div class="flex-1 overflow-x-auto overflow-y-hidden">
      <div v-show="!store.state.app.isCollapse">
        <el-menu
          mode="horizontal"
          background-color="#001529"
          text-color="#CCC"
          active-text-color="#FFF"
          :default-active="store.state.app.activePath"
          class="el-menu-vertical-demo"
          :uniqueOpened="true"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelct"
        >
          <div v-for="menu in menus" :key="menu.path">
            <el-menu-item v-if="!menu.children" :index="menu.path">
              <i class="el-icon-menu"></i>
              <template #title>{{ menu.meta.title }}</template>
            </el-menu-item>
            <el-sub-menu v-else :index="menu.path">
              <template #title>
                <i class="el-icon-location"></i>
                <span>{{ menu.meta.title }}</span>
              </template>
              <el-menu-item
                v-for="child in menu.children"
                :index="child.path"
                :key="child.path"
              >
                {{ child.meta.title }}
              </el-menu-item>
            </el-sub-menu>
          </div>
        </el-menu>
      </div>
    </div>
    <div class="flex w-48 flex-nowrap">
      <div class="flex-1 px-2 text-right" style="line-height: 48px">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="text-white">
            <span>{{ "运营" }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="modifyPassword" icon="el-icon-edit">
                修改密码
              </el-dropdown-item>

              <el-dropdown-item command="logout" icon="el-icon-notebook-1">
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div style="line-height: 48px" class="text-center cursor-pointer w-14">
        <el-dropdown trigger="click" @command="handleCommand">
          <span>
            <el-icon>
              <setting
                style="color: #fff"
                class="text-lg font-bold text-white"
              />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu class="w-32">
              <el-dropdown-item command="account" icon="el-icon-notebook-1">
                账号管理
              </el-dropdown-item>
              <el-dropdown-item command="role" icon="el-icon-user">
                角色管理
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ArrowLeftBold, ArrowRightBold, Setting } from "@element-plus/icons";
import { vocationalWorkRouter } from "@/router/router";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { reactive, watchEffect } from "vue";
import arrayToTree from "array-to-tree";
import { moreDimensionalToOneDimensionalArray } from "@/utils";
import Cookies from "js-cookie";

const state = reactive({});

const store = useStore();
const router = useRouter();

watchEffect(() => {});

const { children } = vocationalWorkRouter[0];

const menus = arrayToTree(
  moreDimensionalToOneDimensionalArray(children).filter((item) => !item.hidden),
  {
    parentProperty: "pid",
    customID: "id",
  }
);

function handleCollapse() {
  store.dispatch("app/setCollapse", !store.state.app.isCollapse);
}
function handleOpen(v) {}
function handleClose(v) {}
function handleSelct(v) {
  store.dispatch("app/setActivePath", v);
  router.push(v);
}
function handleCommand(v) {
  switch (v) {
    case "logout":
      // TODO 清除cookie 和 localStorage sessionStorage 数据
      window.location.replace("/login");
      break;
    case "modifyPassword":
      router.push("/sys-modify-password");
      break;
    case "account":
      router.push("/sys-account");
      break;
    case "role":
      router.push("/sys-role");
      break;
  }
}
</script>
<style>
.el-menu--horizontal .el-menu-item,
.el-menu--horizontal .el-sub-menu,
.el-menu--horizontal .el-sub-menu .el-sub-menu__title {
  height: 3rem;
  line-height: 3rem;
}
.is-fullscreen .el-dialog__header {
  display: none;
}
.is-fullscreen .el-dialog__body {
  padding: 0;
  margin: 0;
}
</style>
